<template>
    <div class="layout">
        <header>
            <div class="left_container">A 0 0</div>
            <div class="map_container"></div>
            <div class="right_container">0 0 B</div>
        </header>
    </div>
</template>

<script setup lang='ts'>
</script>
<style scoped lang='scss'>
.layout {
    background: #fff;
    width: 80%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
    overflow: hidden;
    transition: 0.37s all;

    &:hover {
        transform: scale(1.1);
        box-shadow: 2px 4px 8px rgba(0, 0, 0, .37)
    }

    header {
        height:40px;
        display: grid;
        grid-template-columns: 30% 40% 30%;

        .left_container {
            background: #cba448;
            display: flex;
            align-items: center;
            padding-left: 1em;
            font-size: 0.9em;
            color: #fff;
        }


        .right_container {
            background: #a44435;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 1em;
            font-size: 0.9em;
            color: #fff;
        }
    }
}
</style>